<template>
  <div class="g-container" style="height: 100%;padding: 20px; position: relative">
    <div style="display: flex;position: absolute; right: 10px; bottom: 40px">
      <div
        :style="leftPartStyle"
      >
        <div
          v-for="(item, index) in btnList"
          :key="index"
          :style="btnListStyle"
          @mouseenter="handleMouseOver(index)"
          @mouseleave="handleMouseOut(index)"
          class="btn-list"
        >
          <img :src="item.url" :style="btnImgStyle">
          <span :style="btnTextStyle">
            {{ item.name }}
          </span>
        </div>
      </div>

      <section :style="sectionStyle">
        <div :style="circleListStyle">
          <div
            v-for="(item, index) in iconList"
            :key="index"
            class="circle-class"
            style="position: relative; cursor: pointer"
            @mouseenter="handleCircleMouseOver(index)"
            @mouseleave="handleCircleMouseOut(index)"
          >
            <img :src="item.bakUrl" :style="circleBakStyle">
            <img
              :src="item.url"
              :style="circleStyle"
            >
            <span
              :style="circleBtnStyle"
            >
              {{ item.name }}
            </span>
          </div>
        </div>

        <div :style="biaochiStyle">
          <img :src="biaoChiUrl" :style="biaochiImgStyle">
          <div
            :style="gradiantStyle"
          />
          <div
            :style="biaochiTextStyle"
          >
            <span>0</span>
            <span>1600</span>
            <span>3200</span>
            <span>4800</span>
            <span>6400</span>
            <span>8000</span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import defaultmixins from '@/mixins/bigScreen/defaultmixins'

export default {
  name: 'TypeSelect',
  mixins: [defaultmixins],
  data() {
    return {
      biaoChiUrl: require('@/assets/linglong/bg_biaochi.png'),
      btnList: [
        {
          name: '2D',
          url: require('@/assets/linglong/btn_3D_normal.png'),
          normal: require('@/assets/linglong/btn_3D_normal.png'),
          active: require('@/assets/linglong/btn_3D_hover.png')
        },
        {
          name: '3D',
          url: require('@/assets/linglong/btn_3D_normal.png'),
          normal: require('@/assets/linglong/btn_3D_normal.png'),
          active: require('@/assets/linglong/btn_3D_hover.png')
        }
      ],
      iconList: [
        {
          name: '供电',
          url: require('@/assets/linglong/img_gongdiancircle.png'),
          bakUrl: require('@/assets/linglong/btn_circle_normal.png'),
          normal: require('@/assets/linglong/btn_circle_normal.png'),
          active: require('@/assets/linglong/btn_circle_selected.png')
        },
        {
          name: '供汽',
          url: require('@/assets/linglong/img_gongqicircle.png'),
          bakUrl: require('@/assets/linglong/btn_circle_normal.png'),
          normal: require('@/assets/linglong/btn_circle_normal.png'),
          active: require('@/assets/linglong/btn_circle_selected.png')
        },
        {
          name: '供暖',
          url: require('@/assets/linglong/img_gongnuancircle.png'),
          bakUrl: require('@/assets/linglong/btn_circle_normal.png'),
          normal: require('@/assets/linglong/btn_circle_normal.png'),
          active: require('@/assets/linglong/btn_circle_selected.png')
        },
        {
          name: '供水',
          url: require('@/assets/linglong/img_gongshuicircle.png'),
          bakUrl: require('@/assets/linglong/btn_circle_normal.png'),
          normal: require('@/assets/linglong/btn_circle_normal.png'),
          active: require('@/assets/linglong/btn_circle_selected.png')
        }
      ]
    }
  },
  computed: {
    leftPartStyle() {
      return {
        height: 122 * this.$root.setting.scale + 'px',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        marginRight: 30 * this.$root.setting.scale + 'px',
        fontSize: 26 * this.$root.setting.scale + 'px',
        fontFamily: 'PingFang SC',
        fontWeight: 600 * this.$root.setting.scale,
        color: 'rgba(160,200,219,1)'
      }
    },
    btnListStyle() {
      return {
        position: 'relative',
        width: 100 * this.$root.setting.scale + 'px',
        cursor: 'pointer'
      }
    },
    btnTextStyle() {
      return {
        position: 'absolute',
        left: '50%',
        top: '50%',
        transform: 'translate(-50%,-50%)'
      }
    },
    circleStyle() {
      return {
        position: 'absolute',
        left: '50%',
        top: '48%',
        transform: 'translate(-50%,-50%)',
        width: 86 * this.$root.setting.scale + 'px',
        height: 86 * this.$root.setting.scale + 'px'
      }
    },
    circleBtnStyle() {
      return {
        fontSize: 28 * this.$root.setting.scale + 'px',
        fontFamily: 'PingFang SC',
        fontWeight: 400 * this.$root.setting.scale,
        position: 'absolute',
        left: '50%',
        top: '48%',
        transform: 'translate(-50%,-50%)'
      }
    },
    circleListStyle() {
      return {
        display: 'flex',
        justifyContent: 'space-between',
        marginBottom: 21 * this.$root.setting.scale + 'px'
      }
    },
    biaochiStyle() {
      return {
        position: 'relative'
      }
    },
    sectionStyle() {
      return {
        width: 532 * this.$root.setting.scale + 'px'
      }
    },
    gradiantStyle() {
      return {
        background: 'linear-gradient(90deg,rgba(47,121,221,1),rgba(57,205,161,1))',
        position: 'absolute',
        height: 11 * this.$root.setting.scale + 'px',
        width: '98%',
        top: 5 * this.$root.setting.scale + 'px',
        left: '50%',
        transform: 'translateX(-50%)',
        borderRadius: 50 * this.$root.setting.scale + 'px'
      }
    },
    biaochiTextStyle() {
      return {
        fontSize: 20 * this.$root.setting.scale + 'px',
        fontFamily: 'PingFang SC',
        fontWeight: 400 * this.$root.setting.scale,
        color: 'rgba(160,200,219,1)',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between'
      }
    },
    btnImgStyle() {
      return {
        width: 100 * this.$root.setting.scale + 'px',
        height: 42 * this.$root.setting.scale + 'px'
      }
    },
    circleBakStyle() {
      return {
        width: 122 * this.$root.setting.scale + 'px',
        height: 122 * this.$root.setting.scale + 'px'
      }
    },
    biaochiImgStyle() {
      return {
        width: 532 * this.$root.setting.scale + 'px',
        height: 28 * this.$root.setting.scale + 'px'
      }
    }
  },
  methods: {
    handleMouseOver(index) {
      this.btnList[index].url = this.btnList[index].active
    },
    handleMouseOut(index) {
      this.btnList[index].url = this.btnList[index].normal
    },
    handleCircleMouseOver(index) {
      this.iconList[index].bakUrl = this.iconList[index].active
    },
    handleCircleMouseOut(index) {
      this.iconList[index].bakUrl = this.iconList[index].normal
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-list:hover, .btn-list:active {
  color: #ffffff;
}
.circle-class {
  color: rgba(160,200,219,1);
}
.circle-class:hover, .circle-class:active {
  color: #ffffff;
}
</style>
